<script lang="jsx">
import { defineComponent, computed, unref } from 'vue'
import { propTypes } from '@/utils/propTypes'

export default defineComponent({
  name: 'Icon',
  props: {
    name: propTypes.string,
    title: propTypes.string,
    color: propTypes.string, // 颜色
    size: propTypes.number.def(1), // 大小
    otherClass: propTypes.string, // 其他的class名称
    hover: propTypes.string.def('') // 移入变色,需要蓝色传blue
  },
  setup(props) {
    const getIconFontStyle = computed(() => {
      const { color, size, hover } = props
      return {
        fontSize: `${size}em`,
        color
      }
    })

    return () =>
      props.name ? (
        <i
          class={`iconfont has-hover-${props.hover} icon-${props.name}${
            props.otherClass ? ` ${props.otherClass}` : ''
          }`}
          title={props.title}
          style={unref(getIconFontStyle)}
        ></i>
      ) : null
  }
})
</script>
<style scoped>
.iconfont.has-hover-blue:hover {
  color: var(--el-color-primary);
}
</style>
